﻿@{
    ViewBag.Title = "系统用户管理";
    Layout = "~/Views/Shared/_GridCommonLayout.cshtml";
}


<!--begin grid code-->


<section id="widget-grid" class="">
    <div class="row">
        <!--Operation-->
        <div class="heading-buttons">


            <div class="col-xs-12 col-sm-7 col-md-7 col-lg-4">
                <h1 class="page-title txt-color-blueDark"><i class="fa fa-group  "></i>
                    系统用户管理
			
                </h1>
            </div>
            <div class="buttons pull-right">

                <button type="button" class="btn btn-success btn-labeled "
                    data-bind="click: $root.showAddBefore">
                    <span class="btn-label"><i class="glyphicon glyphicon-plus"></i>
                    </span>添加记录</button>

                <button type="button" class="btn btn-primary btn-labeled "
                    data-bind="click: $root.onDataDeleting">
                    <span class="btn-label"><i class="glyphicon glyphicon-remove"></i>
                    </span>批量删除</button>


            </div>
            <div style="clear: both;">
            </div>
        </div>
        <!--/Operation-->




        <!--Search-->
        <div class="filter-bar">
            <form id="formSearch">
                <div class="lbl glyphicons search" style="cursor: pointer;" data-bind="click: $root.search">
                    <i></i>筛选
                </div>


                <div>
                    <label>用户名：</label><div class='input-append'>
                        <input id='txtbSrSUserName' name='txtbSrSUserName' type='text' placeholder='用户名' class='input-mini' style='width: 120px;' />
                    </div>
                </div>

                <div>
                    <label>姓名：</label><div class='input-append'>
                        <input id='txtbSrSTrueName' name='txtbSrSTrueName' type='text' placeholder='姓名' class='input-mini' style='width: 120px;' />
                    </div>
                </div>

                <div>
                    <label>角色：</label>
                    @Html.DropDownList("txtbSrSTmp1", new SelectList(ViewBag.roleList, "SRoleName", "SRoleName"), "--请选择--", new { @style = "width: 120px;border:1px solid #cccccc" })
                </div>


                <div class="clearfix">
                </div>
            </form>
        </div>
        <!--/search-->



        <article class="col-xs-12 col-sm-12 col-md-12 col-lg-12 sortable-grid ui-sortable">
            <div id="wid-id-0" class="jarviswidget jarviswidget-color-darken jarviswidget-sortable" data-widget-editbutton="false">
                <header>
                    <span class="widget-icon"><i class="fa fa-table"></i></span>
                    <h2>系统用户</h2>
                </header>
                <div style="top: 30px;">
                    <div class="jarviswidget-editbox"></div>
                    <div class="widget-body no-padding">
                        <div role="grid" id="providerGrid" class="dataTables_wrapper form-inline">
                            <div class="table-responsive">

                                <div class="dt-wrapper" style="overflow-y: auto;">
                                    <table class="table table-striped table-bordered table-hover checkboxs">
                                        <!--table head-->
                                        <thead>
                                            <tr>
                                                <th style="width: 1%">
                                                    <input type="checkbox" value="0" />
                                                </th>
                                                <!-- ko foreach: headers -->
                                                <th class="center ">
                                                    <a href="#" data-bind="text: displayText@*, click: $root.sort*@" style="color: black"></a>
                                                    <i class="icon-circle-arrow-up" data-bind="    visible: value == $root.orderBy() && $root.isAsc()"></i>
                                                    <i class="icon-circle-arrow-down" data-bind="    visible: value == $root.orderBy() && !$root.isAsc()"></i>
                                                </th>

                                                <!-- /ko -->
                                                <th class="center" style="width: 60px">操作</th>
                                            </tr>
                                        </thead>
                                        <!--/table head-->
                                        <!--table body(Provider list)-->
                                        <tbody data-bind="foreach: recordSet">
                                            <tr class="selectable" onclick="">
                                                <td class="center">
                                                    <input type="checkbox" name="userSelector" data-bind="value: Id" />
                                                    <input type="hidden" data-bind="value: Id, attr: { id: Id }" />
                                                </td>

                                                <td class='center'><strong data-bind='text: Id'>ID</strong></td>
                                                <td class='center'><strong data-bind='text: SUserName'></strong></td>

                                                <td class='center'><strong data-bind='text: STrueName'></strong></td>
                                                <td class='center'><strong data-bind='text: sexChange(ISex)'></strong></td>
                                                <td class='center'><strong data-bind='text: SPhone'></strong></td>
                                                <td class='center'><strong data-bind='text: SEmail'></strong></td>
                                                <td class='center'><strong data-bind='text: SIdCard'></strong></td>
                                                <td class='center'><strong data-bind='text: SColleage'></strong></td>
                                                <td class='center'><strong data-bind='text: date(DJoinTime)'></strong></td>
                                                <td class='center'><strong data-bind='text: TLastLoginDate'></strong></td>

                                                <td class='center'><strong data-bind='text:STmp1'></strong></td>
                                                <td class="center">
                                                    <a href="#" class="btn-action glyphicons pencil btn-success" data-bind="click: $root.showUpdateModal">
                                                        <i></i></a>
                                                </td>
                                            </tr>
                                        </tbody>
                                        <!--/table body( Provider list)-->

                                    </table>

                                </div>



                                <!-- 分页 -->
                                <ul class="pagination pagination-alt">
                                    <li>
                                        <a data-bind="click: firstPage"><i class="fa fa-fast-backward "></i></a>
                                    </li>
                                    <li>
                                        <a data-bind="click: prevPage"><i class="fa  fa-backward  "></i></a>
                                    </li>
                                    <li>
                                        <a>
                                            <input id="toPage" type="text" data-bind="value: pageIndex, event: { change: $root.changePageIndex }" style="width: 25px;" />
                                            /共<span data-bind="html: totalPages"></span>页 
                                        </a>
                                    </li>
                                    <li>
                                        <a data-bind="click: nextPage"><i class="fa fa-forward "></i></a>
                                    </li>
                                    <li>
                                        <a data-bind="click: lastPage"><i class="fa fa-fast-forward "></i></a>
                                    </li>
                                </ul>

                                <div class="dt-top-row total  ">
                                    当前记录共：<span data-bind="html: totalCount"></span>条
                                </div>
                                <!--end 分页-->
                            </div>

                            <!-- /分页 -->
                        </div>

                        <!-- /分页 -->
                    </div>
                </div>

            </div>

        </article>

    </div>
    <!--end row-->
</section>


<!--SysUser详细对话框-->
<div id="SysUserMessageModal" class="modal fade" id="ProviderMessageModal" tabindex="-1" role="dialog"
    aria-labelledby="SysUserMessageModalLabel" aria-hidden="true" style="width:800px;">
    <div class="modal-content">
        <div class="modal-header">
            <h3>用户详细信息<button type="button" class="close" data-dismiss="modal" aria-hidden="true" id="btnClose">×</button></h3>            
        </div>
        
        <div class="modal-header">
            
            <ul class="nav nav-tabs bordered" id="myTab1">
                <li class="active"><a data-toggle="tab" href="#s1">详细信息</a></li>
                <li><a data-toggle="tab" href="#s2">设置角色</a></li>
                <li><a data-toggle="tab" href="#s3">设置密码</a></li>
                <li><a data-toggle="tab" href="#s4">个人介绍</a></li>
            </ul>
            <div class="tab-content padding-10" id="myTabContent1">
                <!--详细信息-->
                <div class="tab-pane fade in active" id="s1">
                    <div class="modal-body">
                        <input type='hidden' id='txtbID' name='txtbID' />
                        <form id="formSysUser" class="smart-form" data-bind="with: NodeValue">
                            <div class="row">
                                <section class="col col-6">
                                    <label class="label">用户名<span style="color:red;font-size:20px;">*</span></label>
                                    <label class="input">
                                        <input type='text' id='txtbSUserName' name='txtbSUserName' placeholder='' class='span10' data-bind='value:SUserName' />
                                    </label>
                                </section>
                                <section class="col col-6">
                                    <label class="label">Email</label>
                                    <label class="input">
                                        <input type='text' id='txtbSEmail' name='txtbSEmail' placeholder='' class='span10' data-bind='value:SEmail' />
                                    </label>
                                </section>
                            </div>
                            <div class="row">
                                <section class="col col-6">
                                    <label class="label">真实姓名</label>
                                    <label class="input">
                                        <input type='text' id='txtbSTrueName' name='txtbSTrueName' placeholder='' class='span10' data-bind='value:STrueName' />
                                    </label>
                                </section>
                                <section class="col col-6">
                                    <label class="label">地址</label>
                                    <label class="input">
                                        <input type='text' id='txtbSAddr' name='txtbSAddr' placeholder='' class='span10' data-bind='value:SAddr' />
                                    </label>
                                </section>
                            </div>
                            <div class="row">
                                <section class="col col-6">
                                    <label class="label">学院</label>
                                    <label class="select">
                                        @Html.DropDownList("txtbSColleage", new SelectList(ViewBag.partList, "SPartName", "SPartName"), "--请选择--", new { @data_bind="value:SColleage"})
                                    </label>
                                </section>
                                <section class="col col-6">
                                    <label class="label">职称</label>
                                    <label class="input">
                                        <input type='text' id='txtbSPro' name='txtbSPro' placeholder='' class='span10' data-bind='value:SPro' />
                                    </label>
                                </section>
                            </div>
                            <div class="row">
                                <section class="col col-6">
                                    <label class="label">出生日期</label>
                                    <label class="input">
                                        <input type='text' id='txtbDBirth' name='txtbDBirth' placeholder='yy/mm/dd' class='span10' data-bind='value:DBirth' />
                                    </label>
                                </section>
                                <section class="col col-6">
                                    <label class="label">性别</label>
                                    <label class="select">
                                        @{
                                            List<SelectListItem> SexList = new List<SelectListItem>();
                                            SexList.Add(new SelectListItem { Text = "不详", Value = "0"});
                                            SexList.Add(new SelectListItem{Text = "女",Value = "1"}); 
                                            SexList.Add(new SelectListItem{Text = "男",Value = "2"});  
                                            }
                                        @Html.DropDownList("txtbISex", SexList as IEnumerable<SelectListItem>, "--请选择--",new { @data_bind = "value:ISex"})
                                    </label>
                                </section>
                            </div>
                            <div class="row">
                                <section class="col col-6">
                                    <label class="label">联系电话</label>
                                    <label class="input">
                                        <input type='text' id='txtbSPhone' name='txtbSPhone' placeholder='' class='span10' data-bind='value:SPhone' />
                                    </label>
                                </section>
                                <section class="col col-6">
                                    <label class="label">传真</label>
                                    <label class="input">
                                        <input type='text' id='txtbSFax' name='txtbSFax' placeholder='' class='span10' data-bind='value:SFax' />
                                    </label>
                                </section>
                            </div>
                            <div class="row">
                                <section class="col col-6">
                                    <label class="label">身份证号</label>
                                    <label class="input">
                                        <input type='text' id='txtbSIdCard' name='txtbSIdCard' placeholder='' class='span10' data-bind='value:SIdCard' />
                                    </label>
                                </section>
                            </div>
                        </form>
                    </div>
                </div>

                <!--角色选择-->
                <div class="tab-pane fade in " id="s2">
                    <form class="smart-form" id="RoleSelect">
                        <fieldset>
                            <section>
                                <div class="inline-group">

                                    @{ int roleLength = ViewBag.roleList.Count;

                                       
                                       for (int i = 0; i < roleLength; i++)
                                       {
                                           var id = @ViewBag.roleList[i].Id;                      
                                        <label class="checkbox">
                                          <input type='checkbox'  name='checkbox' value='@id'/>
                                            <i></i>
                                            @ViewBag.roleList[i].SRoleName
                                        </label>
                                       }                       
                                    }

                                </div>
                            </section>
                        </fieldset>
                    </form>
                </div>

                <!--设置密码-->
                <div class="tab-pane fade in " id="s3" >
                    <form class="smart-form" data-bind="with:NodeValue">
                        <fieldset>
                            <section>
                                <label class='control-label'>密码<span style="color:red;">*(长度为6-20)</span></label>
                                <label class="input">
                                    <input type="password" id='txtbSPassword' name='txtbSPassword' placeholder='' class='span10' data-bind='value:SPassword' />
                                </label>
                            </section>

                            <section>
                                <label class='control-label'>确认密码<span style="color:red;">*</span></label>
                                <label class="input">
                                    <input type="password" id='confirm_password' name='confirm_password' placeholder='' class='span10' data-bind='value:SPassword' />
                                </label>
                            </section>
                        </fieldset>
                    </form>
                </div>

                <!--个人简介-->
                <div class="tab-pane fade in " id="s4">                   
                    <div class="click2edit" style="height:400px;"></div>
                </div>
                  

                <!--页脚-->
                <div class="modal-footer">
                    <button class="btn" data-dismiss="modal" aria-hidden="true" id="btnCancel">
                        取消</button>
                    <button id="btnSaveOrUpdateModel" class="btn btn-primary" aria-hidden="true" data-bind=" click: onDataAddingOrUpdate">
                        确定</button>
                </div>
            </div>
            <!--end div content-->
        </div>
    </div>
</div>
<!--/详细SysUser对话框-->



<script src="~/Js/plugin/summernote/summernote.js"></script>
<script type="text/javascript">

    var RoleIds;//角色Id拼接字符串

    var gdViewModel;
    //初始化编辑器
    var edit = function () {
        $('.click2edit').summernote({ focus: true });
    };

    //性别的转换
    var sexChange = function (Isex) {
        if (Isex == 0)
            return "";
        else if (Isex == 1)
            return "女";
        else
            return "男";
    }


    //角色字符串的拼接
    var roleStr = function () {
        var check = $(".inline-group input:checked");
        var roleIds = "";
        check.each(function (i) {        //循环拼装被选中项的值
            roleIds = roleIds + ',' + $(this).val();
        });
        roleIds = dropRsplit(roleIds, ",");
        return roleIds;
    }  

    //规范时间显示格式
    function date(date)
    {
        if (date == "" || date == null)
            return "";
        var dd = date.slice(0, 10);
        var ss = date.slice(11, 19);
        return dd +" "+ ss;
    }

    //验证密码
    var VerifyPassword = function () {
        var p1 = $("#txtbSPassword").val();
        var p2 = $("#confirm_password").val();
        RoleIds = roleStr();
        if (p1 == "" || p2 == "") {
            alert("请填写密码");
            return false;
        }
        else if (p1.length < 6 || p1.length > 20) {
            alert("密码长度为6—20位");
            return false;
        }
        else if (p1 != p2) {
            alert("两次密码输入不一致");
            $("#txtbSPassword").val("");
            $("#confirm_password").val("");
            return false;
        }
        else {
            return true;
        }
    }

    $(function () {

        edit();

        $(".note-editable").css("height", "310px");

        var options = {

            dialogId: "SysUserMessageModal", //添加对话框

            pageSize: 20, //分页大小
            hidId: $("#txtbID"),
            SaveUpdateBtn: $("#btnSaveOrUpdateModel"),
            frmElement: $("#formSysUser"),

            //节点数据
            NodeValue: ko.observable({

                Id: 0,
                IRoleId: '',
                SUserName: '',
                SPassword: '',
                TCreateDate: '',
                TLastLoginDate: '',
                SCip: '',
                SLip: '',
                STrueName: '',
                SAddr: '',
                IPart: 0,
                IState: 0,
                SPro: '',
                DBirth: '',
                SNational: '',
                SPhone: '',
                SFax: '',
                SIdCard: '',
                SColleage: '',
                DJoinTime: new Date(),
                SImg: '',
                SSignImg: '',
                IScore: 0,
                IPostRecord: 0,
                ILevel: 0,
                ITmp1: 0,
                ITmp2: 0,
                STmp1: '',
                STmp2: '',
                SMem: '',
                ISex: 0,
                SIntroduce: '',
                SWorkplace: '',
                SEmail: '',
                IShowPosition: 0,
                ISort: 0,
                SPartName: '',

            }),


            //用户列表Grid头部列名称
            headers: [


 { displayText: 'ID', value: 'Id', width: 'auto' },
 { displayText: '用户名', value: 'SUserName', width: 'auto' },
 { displayText: '姓名', value: 'STrueName', width: 'auto' },

 { displayText: '性别', value: 'ISex', width: 'auto' },
 { displayText: '电话', value: 'SPhone', width: 'auto' },
 { displayText: '邮箱', value: 'SEmail', width: 'auto' },
 { displayText: '身份证号', value: 'SIdCard', width: 'auto' },
 { displayText: '所属学院', value: 'SColleage', width: 'auto' },
 { displayText: '加入时间', value: 'DJoinTime', width: 'auto' },
 { displayText: '最后登录时间', value: 'TLastLoginDate', width: 'auto' },
 { displayText: '拥有角色', value: 'SRoleName', width: 'auto' }

            ],

            //默认的排序方式
            defaultOrderBy: "Id",
            //用户查询URL
            dataQueryUrlAccessor: function () {
                return "/api/SysUser/GetByPageUserAndUserRole";
            },
            AddBefore: function () {
                //表单发送前的函数
                //验证密码
                var p1 = $("#txtbSPassword").val();
                var p2 = $("#confirm_password").val();
                RoleIds = roleStr();
                if (p1 == "" || p2 == "") {
                    alert("请填写密码");
                    return;
                }
                if (p1.length < 6 || p1.length > 20) {
                    alert("密码长度为6—20位");
                    return;
                }
                if (p1 != p2) {
                    alert("两次密码输入不一致");
                    $("#txtbSPassword").val("");
                    $("#confirm_password").val("");
                    return;
                }
                //选择角色
                if (RoleIds == "") {
                    alert("请选择角色！");
                    return;
                }
                
                options.NodeValue().SPassword = $("#txtbSPassword").val();
                options.NodeValue().SIntroduce = $(".note-editable").code();
                return true;
            },
            //添加用户URL
            dataAddUrlAccessor: function () {
                return appendQueryString("/api/SysUser/AddUserAndUserRole", { RoleIds: RoleIds });
            },
            dataUpdateAccessor: function (key) {

                passWord = $("#txtbSPassword").val();
                if (passWord != "") {
                    if (!VerifyPassword()) {//验证密码
                        return;//验证失败
                    }
                    options.NodeValue().SPassword = $("#txtbSPassword").val();
                }
               
                //选择角色
                if (RoleIds == "") {
                    alert("请选择角色！");
                    return;
                }                              

                RoleIds = roleStr();
                options.NodeValue().SIntroduce = $(".note-editable").code();

                return appendQueryString("/api/SysUser/PutUserAndUserRole/" + key, { RoleIds: RoleIds });
            },
            dataNodeSelect: function (id) {
                return "/api/SysUser/GetUserAndUserRole/" + id;
            },


            dataDeleteAccessor: function (data) {
                var userIDs = "";

                var check = $(".selectable input:checked");  //得到所有被选中的checkbox
                check.each(function (i) {        //循环拼装被选中项的值
                    userIDs = userIDs + ',' + $(this).val();
                });
                //清除多余的分割号
                userIDs = dropRsplit(userIDs, ",");
                if (userIDs != "") {
                    return appendQueryString("/api/SysUser/DeleteUserAndUserRole", { ids: userIDs });
                } else
                    return "";
            }
            , initEd: function () {
                //gird初始化的后置事件 信息

            }
            , changeEnd: function () {
                //对话框关闭后 的后置事件
                $("#txtbSPassword").val("");
                $("#confirm_password").val("");
                $(".note-editable").text("");
                $(".inline-group input:checked").removeAttr("checked");
            }
            , showDetailEnd: function (data) {
                $(".note-editable").prepend(data.SIntroduce);
                //显示对话框详细之后
            }
            , showDlgBefore: function () {
            }

        };

        gdViewModel = new gridViewModel(options);


        gdViewModel.init();

        ko.applyBindings(gdViewModel);

        options.frmElement.validate({
            rules: {

                txtbSUserName: { required: true, maxlength: 25 },
                txtbTCreateDate: { maxlength: 50 },
                txtbTLastLoginDate: { maxlength: 50 },
                txtbSCip: { maxlength: 50 },
                txtbSLip: { maxlength: 50 },
                txtbSTrueName: { maxlength: 50 },
                txtbSAddr: { maxlength: 50 },
                txtbIPart: { digits: true },
                txtbIState: { digits: true },
                txtbSPro: { maxlength: 50 },
                txtbDBirth: { date: true },
                txtbSPhone: { isPhone: true },
                txtbSFax: { maxlength: 50 },
                txtbSIdCard: { maxlength: 50},
                txtbSColleage: { maxlength: 50 },
                txtbIScore: { digits: true },
                txtbIPostRecord: { digits: true },
                txtbISex: { digits: true },
                txtbSIntroduce: { maxlength: 2000 },
                txtbSEmail: { email: true },
                txtbIShowPosition: { digits: true },
                txtbISort: { digits: true }
            },
            messages: {


                txtbSUserName: { required: '必填项', maxlength: '最大长度为25' },
                txtbSTrueName: { maxlength: '最大长度为250' },
                txtbSAddr: { maxlength: '最大长度为250' },
                txtbSPro: { maxlength: '最大长度为25' },
                txtbDBirth: { date: '必须是日期格式，例如：2013/01/01' },
                txtbSPhone: { maxlength: '最大长度为25' },
                txtbSFax: { maxlength: '最大长度为25' },
                txtbSIdCard: { maxlength: '最大长度为25' },
                txtbSColleage: { maxlength: '最大长度为125' },
                txtbISex: { digits: '必须是整数' },
                txtbSIntroduce: { maxlength: '最大长度为2000' },
                txtbSWorkplace: { maxlength: '最大长度为50' },
                txtbSEmail: { email: '请输入正确的邮箱格式' }
            }
        });

        //验证用户名唯一
        $("#txtbSUserName").blur(function () {
            $.getJSON("/SysUser/UserNameValidate?UserName=" + $("#txtbSUserName").val(), function (data) {
                if (data != "") {
                    alert("用户名已存在")
                    $("#txtbSUserName").val("");
                }
            })
        });

        //点击“取消”按钮清空已填内容
        $("#btnCancel").click(function () {
            $("#txtbSPassword").val("");
            $("#confirm_password").val("");
            $(".note-editable").text("");
            $(".inline-group input:checked").removeAttr("checked");
        });

        //点击“关闭”按钮清空已填内容
        $("#btnClose").click(function () {
            $("#txtbSPassword").val("");
            $("#confirm_password").val("");
            $(".note-editable").text("");
            $(".inline-group input:checked").removeAttr("checked");
        });       

    });

</script>


<!--/end grid code-->
